<template>
  <div style="margin-top: 20px; text-align: right;margin-right: 25px">
    <el-button  @click="open"   type="primary" >新增</el-button>
    <el-button @click="toggleSelection()"  color="#7ec1ff" plain>批量删除</el-button>
  </div>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="序号" width="200" property="index"/>
    <el-table-column label="标题"  width="400px" property="title"/>
    <el-table-column label="内容"  width="400px" property="content"/>
    <el-table-column property="address" label="操作"  style="text-align: center">
      <el-button plain @click="open" >编辑</el-button>
      <el-popconfirm
          width="220"
          confirm-button-text="是"
          cancel-button-text="否"
          :icon="InfoFilled"
          icon-color="orange"
          title="确认删除"
      >
        <template #reference>
          <el-button >删除</el-button>
        </template>
      </el-popconfirm>
    </el-table-column>
  </el-table>
  <div style="margin-top: 10px; float: right" v-if="!tableData">
    <div style="margin: 5px">共5条数据</div>
    <el-pagination background layout="prev, pager, next" :total="10" />
  </div>


</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

const open = () => {
  ElMessageBox.prompt('分类名称', '编辑', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputPattern:
        /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: 'Invalid Email',
  })
      .then(({ value }) => {
        ElMessage({
          type: 'success',
          message: `修改成功:${value}`,
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '修改失败',
        })
      })
}
interface User {
  index: number
  title: string
  content: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = ref([
])
</script>

<style scoped>

</style>